import { defineComponent, PropType, ref } from '@vue/composition-api';
import Panel from './components/Panel';
import Widgets from './components/Widgets';
import PropsConf from './components/PropsConf';
import './theme/index.scss';
import 'element-ui/lib/theme-chalk/select.css';
import { createWidgetConfig, IWidgetDesc } from './config';

type RootProvide = Omit<ReturnType<typeof createWidgetConfig>, 'registry'>;

export default defineComponent({
  name: 'App',
  props: {
    componentList: {
      type: Array as PropType<RootProvide['componentList']>,
      required: true,
    },
    componentMap: {
      type: Map as PropType<RootProvide['componentMap']>,
      required: true,
    },
  },

  setup(props) {
    const dragComponent = ref<IWidgetDesc[]>([]);

    function handleWidgetDragstart(widgetDesc: IWidgetDesc) {
      dragComponent.value = [widgetDesc];
    }
    return () => (
      <div id="app">
        <div class="item">
          <Widgets
            widgets={props.componentList}
            widgetDragstart={handleWidgetDragstart}
          />
        </div>
        <div class="item">
          <Panel movingWidgets={dragComponent.value} />
        </div>

        <div class="item">
          <PropsConf />
        </div>
      </div>
    );
  },
});
